<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>blog1</title>
	<style>
	.part1{
		width:250px;
		height: 500px; 
		float: left;

	}
	.part2{
		width:450px;
		height: 500px; 
		float: left;
		/*overflow: hidden;*/
	}
	.part3{
		width:280px;
		height: 500px; 
		float: left;
		margin-top: 100px;
	}
	.part31{
		width:230px;
		height: 280px;
		border: 1px solid #ccc;
		margin-bottom: 30px;
	}
	.part32{
		margin-left: 50px;
	}
	ul{
		list-style: none;/*去点点*/
		margin: 0;
		float: left;
	}
	li{
	margin-top: 20px;
	}
	a{
		color: gray;
		text-decoration: none;
		display: inline-block;
		border-bottom: 2px dashed #CCC;
		width: 100px;
		padding-bottom: 10px;

	}
	a:hover{
		color: red;
	}
	.body{
		width:1000px;
		height: 1000px; 
		margin:0 auto; 
	}
	</style>
</head>
<body>
<div class="body">
	<div><img src="MarthaBlog.jpg"></div>
	<div class="part1">
		<ul>
			<li><a href="#">BEAUTIFUL</a></li>
			<li><a href="#">BEAUTIFUL</a></li>
			<li><a href="#">STUDYSTUD</a></li>
			<!-- <li><a href="">four</a></li>
			<li><a href="">five</a></li>
			<li><a href="">six</a></li> -->
			<li><a href="#">DOUBLEHAP</a></li>
			<li><a href="#">BACKGROUN</a></li>
			<li><a href="#">EVERYNICE</a></li>
			<li><a href="#">beautiful</a></li>
			<li><a href="#">YOUSMART</a></li>
			<li><a href="#">HANDSOME</a></li>
			<li><a href="#">DONTQUIT</a></li>
		</ul>
	</div>
	<div class="part2">
			JULY,27,7
			<h2>
				The Mistakes I Made As<br/>a Beginner
				Programmer
			</h2>
			<p>
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspLet me make one thing clear. this 
			<br/>If you are a beginner programmer, <br/>
			this article is not meant to make you <br/>
			feel bad about the mistakes thatyou <br/>
			might be making but rather to make you<br/> 
			aware of them, teach you.
			</p>
			<img src="house-300x200.jpg">
			<p>
				These mistakes are not presented <br/>
				here in any particular order.
			</p>
	</div>
	<div class="part3">
		SEARCH<br/> 
		<input type="text" placeholder=""></input>
		<button>GO</button>
		<br/>
		<br/>
		MOST RECEENT POSTS
		<div class="part31">
			<p class="part32">
				When angry, count<br/> 
				to 10 before <br/>
				you speak.<br/>
				<br/>
				 If very angry, a <br/>
				 hundred.When<br/>
				 reviewing <br/>
				 <br/>
				 code, count to 10<br/>
				 before you <br/>
				 refactor.<br/>
			</p>
		</div>

		MONTHLY ARCHIVES
		<select name="add" id="">
				<option value="aa">Mon</option>
				<option value="bb" selected="selected">See Pusls From</option>
				<option value="cc">Tes</option>
			</select>
	</div>
	</div>
</body>
</html>